<template>
    <ul>
        <li v-for="m in 9" :key="m">
            <div class="icon">
                <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/%E5%8D%AB%E7%94%9F%E9%99%A2%E5%9B%BE%E7%89%87_u186-0.svg" alt="">
                <div class="names"> 
                    长坂坡人民医院
                    <div class="details">
                        详情
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u196.svg" alt="">
                    </div>
                </div>
            </div>
            <div class="bottom">
                <span class="num" v-for="n in 4" :key="n">入驻总人数<span class="fund">120</span></span>
            </div>
        </li>
    </ul>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
        width: 413px;
        // height: 200px;
        margin: 12px 0 0 0;
        padding: 0 15px;
        box-sizing: border-box;
        box-shadow: 0px 3px 6px rgba(126, 134, 142, 0.156862745098039);
        font-family: 'PingFang-SC-Medium', 'PingFang SC Medium', 'PingFang SC ExtraLight', 'PingFang SC', sans-serif;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-radius: 4px;
        .icon{
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            img{
                width: 36px;
                height: 36px;
            }
            .names{
                width: 100%;
                // height: 70px;
                font-size: 14px;
                color: #171a1d;
                display: flex;
                justify-content: space-between;
                // align-items: center;
                padding-left: 12px;
                box-sizing: border-box;
                .details{
                    color: #171a1d7a;
                    img{
                        width: 7px;
                        height: 12px;
                    }
                }
            }
        }
        .bottom{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .num{
                width: 180px;
                height: 48px;
                display: flex;
                flex-wrap: wrap;
                // align-items: center;
                line-height: 48px;
                justify-content: space-between;
                padding: 0 12px;
                box-sizing: border-box;
                font-size: 14px;
                color: #171a1d7a;
                background-color: rgba(242, 244, 248, 1);
                margin-bottom: 12px;
                border-radius: 4px;
                .fund{
                    min-width: 32px;
                    font-size: 18px;
                    color: #333;
                }
            }
        }
    }
    li:hover{
        box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
    }
}
</style>